<template>
	<view>
		<view class="wrapper">
			<view class="handLeft_con">
				<image @click="selectColorEvent('black','#1A1A1A')"
					:src="selectColor == 'black' ? '/static/signature/color_black_selected.png' : '/static/signature/color_black.png'"
					:class="[selectColor == 'black' ? 'color_select' : '', 'black-select']"></image>
				<image @click="selectColorEvent('red','#ca262a')"
					:src="selectColor == 'red' ? '/static/signature/color_red_selected.png' : '/static/signature/color_red.png'"
					:class="[selectColor == 'red' ? 'color_select' : '', 'black-select']"></image>

				<view class="resetBtn" @click="resetClick">重 写</view>
				<view class="backBtn" @click="goBack">返 回</view>
				<view class="saveBtn" @click="completeClick">完 成</view>
			</view>
			<view class="handCenter_con">
				<canvas class="handWriting" :disable-scroll="true" @touchstart="uploadScaleStart"
					@touchmove="uploadScaleMove" canvas-id="signature"></canvas>
			</view>
			<view class="handRight_con">
				<view class="handTitle">请签名</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 默认工地信息
				defaultWorksite: JSON.parse(uni.getStorageSync('defaultWorksite')),

				// 角色
				role: '', //1工人、2带班、3老板

				// 签名相关
				canvasName: 'signature',
				ctx: '',
				startX: null,
				startY: null,
				canvasWidth: 0,
				canvasHeight: 0,
				selectColor: 'black',
				lineColor: '#1A1A1A', // 颜色
				lineSize: 5, // 笔记倍数
				role: 1,
				id: '',
			};
		},
		onLoad(e) {
			this.role = e.role;

			this.ctx = uni.createCanvasContext("signature");
			this.role = e.role;
			this.id = e.id;
			this.$nextTick(() => {
				uni.createSelectorQuery().select('.handCenter_con').boundingClientRect(rect => {
						this.canvasWidth = rect.width;
						this.canvasHeight = rect.height;
						/* 将canvas背景设置为 白底，不设置  导出的canvas的背景为透明 */
						this.setCanvasBg('#fff');
					})
					.exec();
			});

			// #ifdef APP-PLUS
			plus.screen.screenOrientation('landscape-primary');
			// #endif
		},
		onUnload() {
			// #ifdef APP-PLUS
			plus.screen.screenOrientation('portrait-primary');
			// #endif
		},
		methods: {
			// 笔迹开始
			uploadScaleStart(e) {
				this.startX = e.changedTouches[0].x
				this.startY = e.changedTouches[0].y
				//设置画笔参数
				//画笔颜色
				this.ctx.setStrokeStyle(this.lineColor)
				//设置线条粗细
				this.ctx.setLineWidth(this.lineSize)
				//设置线条的结束端点样式
				this.ctx.setLineCap("round") //'butt'、'round'、'square'
				//开始画笔
				this.ctx.beginPath()
			},

			// 笔迹移动
			uploadScaleMove(e) {
				//取点
				let temX = e.changedTouches[0].x
				let temY = e.changedTouches[0].y
				//画线条
				this.ctx.moveTo(this.startX, this.startY)
				this.ctx.lineTo(temX, temY)
				this.ctx.stroke()
				this.startX = temX
				this.startY = temY
				this.ctx.draw(true)
			},

			// 选择颜色
			selectColorEvent(str, color) {
				// console.log(str, color);
				this.selectColor = str;
				this.lineColor = color;
			},

			// 重写
			resetClick() {
				this.ctx.clearRect(0, 0, 700, 730);
				this.ctx.draw();
				// 设置canvas背景为白底
				this.setCanvasBg('#fff');
			},

			/**
			 * 设置canvas背景色;不设置,导出的canvas的背景为透明
			 * rect() 参数说明  矩形路径左上角的横坐标，左上角的纵坐标, 矩形路径的宽度, 矩形路径的高度
			 */
			// 
			setCanvasBg(color) {
				// 这里是 canvasHeight - 4 是因为下边盖住边框了，所以手动减了写
				this.ctx.rect(0, 0, this.canvasWidth, this.canvasHeight - 4);
				// ctx.setFillStyle('red')
				this.ctx.setFillStyle(color);
				this.ctx.fill(); //设置填充
				this.ctx.draw(); //开画
			},

			// 返回
			goBack() {
				uni.navigateBack({
					delta: 1
				})
			},

			// 完成
			completeClick() {
				var _this = this;
				uni.canvasToTempFilePath({
					canvasId: 'signature',
					fileType: 'jpg',
					quality: 1, //图片质量
					success(res) {
						console.log('==canvas生成图片地址==');
						console.log(res.tempFilePath);
						// 保存到相册
						// uni.saveImageToPhotosAlbum({
						// 	filePath: res.tempFilePath,
						// 	success(res) {
						// 		uni.showToast({
						// 			title: '已保存到相册',
						// 			duration: 2000
						// 		});
						// 	}
						// });

						uni.compressImage({
							src: res.tempFilePath,
							rotate: 30,
							success: resData => {
								console.log("==压缩图片==")
								// console.log(resData.tempFilePath)
								_this.imageUpload(resData.tempFilePath);
							}
						})
					}
				});
			},

			// 图片上传到云端
			imageUpload(filePath) {
				var _this = this;
				
				
				uni.uploadFile({
					url: _this.$baseURL + '/api/plus.upload/imgUpload',
					filePath: filePath,
					name: 'file',
					formData: {
						type: 'sign',
						project_id: _this.defaultWorksite.project_id,
					},
					header: {
						'content-type': 'application/x-www-form-urlencoded;charset=UTF-8',
						'token': uni.getStorageSync('token'),
					},
					success: function(res) {
						// console.log(res);
						var resData = JSON.parse(res.data)
						console.log(resData.data);
						var signatureInfo = resData.data;

						if (_this.role == '1') {
							uni.$emit('signWorker', signatureInfo);
						}
						if (_this.role == '2') {
							uni.$emit('signForeman', signatureInfo);
						}
						uni.navigateBack({
							delta: 1
						})
					},
					complete: function(res) {

					}
				});
			},

		}
	};
</script>

<style>
	page {
		background: #fbfbfb;
		height: auto;
		overflow: hidden;
	}

	.wrapper {
		width: 100%;
		height: 95vh;
		margin: 30rpx 0;
		font-size: 28rpx;
		overflow: hidden;
		display: flex;
		align-content: center;
		justify-content: center;
	}

	/* 画笔 */
	.black-select {
		width: 60rpx;
		height: 60rpx;
		position: absolute;
		top: 30rpx;
		left: 25rpx;
	}

	.black-select.color_select {
		width: 90rpx;
		height: 90rpx;
		top: 100rpx;
		left: 10rpx;
	}

	.red-select {
		width: 60rpx;
		height: 60rpx;
		position: absolute;
		top: 140rpx;
		left: 25rpx;
	}

	.red-select.color_select {
		width: 90rpx;
		height: 90rpx;
		top: 120rpx;
		left: 10rpx;
	}

	/* 左边 */
	.handLeft_con {
		height: 95vh;
		display: inline-flex;
		flex-direction: column;
		justify-content: space-between;
		align-content: space-between;
		flex: 1;
	}

	.resetBtn {
		color: #ca262a;
		transform: rotate(90deg);
		position: absolute;
		top: 250rpx;
		left: 22rpx;
	}

	.backBtn {
		color: #666;
		transform: rotate(90deg);
		position: absolute;
		top: 375rpx;
		left: 22rpx;
	}

	.saveBtn {
		width: 150rpx;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		color: #fff;
		border-radius: 10rpx;
		background: #008ef6;
		overflow: hidden;
		transform: rotate(90deg);
		position: absolute;
		bottom: 82rpx;
		left: -20rpx;
	}

	/* 中间 */
	.handCenter_con {
		flex: 5;
		border: 4rpx dashed #e9e9e9;
		box-sizing: border-box;
		overflow: hidden;
	}

	.handWriting {
		width: 100%;
		height: 95vh;
		background: #fff;
	}

	/* 右边 */
	.handRight_con {
		display: flex;
		align-items: center;
	}

	.handTitle {
		flex: 1;
		color: #666;
		transform: rotate(90deg);
	}
</style>
